既然昨天提到自訂 spacing，width和height 也會跟著繼承，今天威爾豬就來講講寬高的使用吧。
使用方式為：w-{number}，沒錯，後面的數值預設就是和間距一樣，所以說熟悉一種，等於你熟悉了很多種。不過現在幾乎都是已 RWD 為主，除非某些特定的情況，相信大多數情形下，不會去設定固定寬度的，如果一定要用到預設的固定寬度，記得數值為 4 的倍數。
| class | width | px |
|---|---|---|
| w-0 | 0px | |
| w-0.5 | 0.125rem | 2px |
| w-1 | 0.25rem | 4px |
| w-1.5 | 0.375rem | 6px |
| w-2 | 0.5rem | 8px |
| w-2.5 | 0.625rem | 10px |
| w-3 | 0.75rem | 12px |
| w-3.5 | 0.875rem | 14px |
| w-4 | 1rem | 16px |
| w-5 | 1.25rem | 20px |
| w-6 | 1.5rem | 24px |
| w-7 | 1.75rem | 28px |
| w-8 | 2rem | 32px |
| w-9 | 2.25rem | 36px |
| w-10 | 2.5rem | 40px |
| w-11 | 2.75rem | 44px |
| w-12 | 3rem | 48px |
| w-14 | 3.5rem | 56px |
| w-16 | 4rem | 64px |
| w-20 | 5rem | 80px |
| w-24 | 6rem | 96px |
| w-28 | 7rem | 112px |
| w-32 | 8rem | 128px |
| w-36 | 9rem | 144px |
| w-40 | 10rem | 160px |
| w-44 | 11rem | 176px |
| w-48 | 12rem | 192px |
| w-52 | 13rem | 208px |
| w-56 | 14rem | 224px |
| w-60 | 15rem | 240px |
| w-64 | 16rem | 256px |
| w-72 | 18rem | 288px |
| w-80 | 20rem | 320px |
| w-96 | 24rem | 384px |
| w-px | 1px |
在 Bootstrap 寬高度預設只給我們 4 種比例，Tailwind 真的彈性很多，使用方式為：w-{fraction}，這個很直覺，就是依外層的寬度大小，內層再來分成幾等份，以百分比而不是固定值來決定寬度，1/2 就是 2 等份佔 1 等份，2/3 就是 3 等份佔 2 等份，以此類推。Tailwind 預設已幫我們分成 2、3、4、5、6、12 等份。
| class | width |
|---|---|
| w-1/2 | 50% |
| w-1/3 | 33.333333% |
| w-2/3 | 66.666667% |
| w-1/4 | 25% |
| w-2/4 | 50% |
| w-3/4 | 75% |
| w-1/5 | 20% |
| w-2/5 | 40% |
| w-3/5 | 60% |
| w-4/5 | 80% |
| w-1/6 | 16.666667% |
| w-2/6 | 33.333333% |
| w-3/6 | 50% |
| w-4/6 | 66.666667% |
| w-5/6 | 83.333333% |
| w-1/12 | 8.333333% |
| w-2/12 | 16.666667% |
| w-3/12 | 25% |
| w-4/12 | 33.333333% |
| w-5/12 | 41.666667% |
| w-6/12 | 50% |
| w-7/12 | 58.333333% |
| w-8/12 | 66.666667% |
| w-9/12 | 75% |
| w-10/12 | 83.333333% |
| w-11/12 | 91.666667% |
| w-full | 100% |
| w-screen | 100vw |
| w-min | min-content |
| w-max | max-content |
| w-auto | auto |
這邊威爾豬要提的是 width: 100%; 的寫法是
w-full，而不是 Bootstrap 的w-100。width: 100vw; 的寫法是w-screen，而不是 Bootstrap 的vw-100，這邊不得不說 Bootstrap 的寫法直覺多了。
用法就是：max-w-{size}，而 max-w-screen-sm、md ... 的尺寸大小，跟前幾篇斷點的設定是一樣的，如果當初斷點有修改設定過，這邊的尺寸也會跟著變動。那非 screen 的最大尺寸預設是另外的設定，想自行修改也是在 Tailwind.config.js 裡 theme 的 maxWidth 修改，這邊威爾豬就不再多做範例了。
| class | max-width |
|---|---|
| max-w-0 | 0rem |
| max-w-xs | 20rem |
| max-w-sm | 24rem |
| max-w-md | 28rem |
| max-w-lg | 32rem |
| max-w-xl | 36rem |
| max-w-2xl | 42rem |
| max-w-3xl | 48rem |
| max-w-4xl | 56rem |
| max-w-5xl | 64rem |
| max-w-6xl | 72rem |
| max-w-7xl | 80rem |
| max-w-screen-sm | 640px |
| max-w-screen-md | 768px |
| max-w-screen-lg | 1024px |
| max-w-screen-xl | 1280px |
| max-w-screen-2xl | 1536px |
| max-w-full | 100% |
| max-w-none | none |
| max-w-min | min-content |
| max-w-max | max-content |
| max-w-prose | 65ch |
說實話，預設這些威爾豬自己也記不住，但咱們只要記得 max-width: 100%; 的寫法是：max-w-full，不是 Bootstarp 的 mw-100 就好了，因為威爾豬也很少用到其他的 class。至於 prose，我們以後再提。
有最大寬度肯定有最小寬度啊，不過威爾豬本身很少用到預設的這些 class，同學們只要知道 Tailwind 本身有這些設定就好了。
| class | max-width |
|---|---|
| min-w-0 | 0px |
| min-w-full | 100% |
| min-w-min | min-content |
| min-w-max | max-content |
至於高度部分，基本上和寬度大同小異，只需將 w 替換成 h 即可，但要注意幾個 class 不一樣或沒有，例如
{ max | min }-content 的部分。h-screen-{ sm | md | lg | ...}，取而代之的是 { max | min }-h-screen。max-h-prose。寬高數值多是多了點，但了解過後其實也沒想像中複雜，因為要記住的部分就那幾個 class，那咱們明天見。
iThome鐵人賽
看影片追技術